<template>
  <div
    class="inline-flex"
    style="height: 200px; width: 100%; margin: 2px;"
    :style="{
      boxShadow: `var(${getCssVarName(shadow.type)})`,
    }"
  >
  TestTest
  </div>
  <div
    class="inline-flex"
    style="height: 500px; width: 100%; margin: 2px;"
    :style="{
      boxShadow: `var(${getCssVarName(shadow.type)})`,
    }"
  >
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
    style="margin-top:10px"
  >
    <el-tab-pane label="User" name="first">
      User
      <el-divider />
    </el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
  </el-tabs>
  </div>

  <el-upload
    v-model:file-list="fileList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>

  <el-table :data="tableData" style="width: 500px">
          <el-table-column prop="date" label="Date" width="100">
            <template #default="{row}">
               <el-input />
            </template>
            </el-table-column>
          <el-table-column prop="name" label="Name" width="100" />
          <el-table-column prop="address" label="Address" />
        </el-table>

</template>
<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import type { TabsPaneContext } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'


const tableData = ref([{ date: '2022-01-01', name: 'Tom', address: 'China' }])
const shadow = ref({ name: 'Dark Shadow', type: 'dark' });
const getCssVarName = (type: string) => {
  return `--el-box-shadow${type ? '-' : ''}${type}`
}
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const ProductInfoimageUrl = ref('')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([])
// 文件移除处理函数
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
// 图片预览处理函数
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

// 图片上传成功处理函数
const handleAvatarSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  //await addProductInforFile();
}
// 上传图片之前的钩子函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg'&&rawFile.type !== 'image/png') {
    ElMessage.error('图片必须是 jpeg 或者 png 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}



</script>


<style>
:root {
  --el-box-shadow: 0 2px 4px rgba(236, 228, 228, 0.1);
  --el-box-shadow-light: 0 1px 2px rgba(223, 76, 76, 0.05);
  --el-box-shadow-lighter: 0 1px 1px rgba(19, 56, 38, 0.025);
  --el-box-shadow-dark: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.demo-tabs {
  font-size: 20px;
  font-weight: 100;
}
/* 使用更具体的选择器 */
.el-table__header-wrapper th {
  background-color: rgb(237, 234, 234) !important;
  color: #333 !important; /* 可选：设置表头文字颜色 */
}
</style>

